<!--
 * @Author: your name
 * @Date: 2022-03-01 09:31:37
 * @LastEditTime: 2022-05-14 10:16:28
 * @LastEditors: 血雪球 wash0226@outlook.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\traceability-information-supplement\index.vue
// 配置溯源码
-->
<template>
  <baseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="120"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :has-cancel="false"
        :has-save="false"
        @add="add"
        @cancel="cancel('formData')"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:tab-select>
      <selectbutton
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="nowselectbuttonindex"
      />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="common-search-item">
          <div class="label">主体名称:</div>
          <div class="input">
            <el-input v-model="organizationName" clearable />
          </div>
        </div>
        <div class="common-search-item">
          <div class="label">负责人:</div>
          <div class="input">
            <el-input v-model="contact" clearable />
          </div>
        </div>
        <div class="common-search-item">
          <div class="label">地址:</div>
          <div class="input">
            <el-input v-model="plantAddress" clearable />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:dialog>

      <el-dialog
        v-loading="loading"
        width="30%"
        :title="titleText + '生成溯源信息'"
        :visible.sync="dialogFormVisible"
        :before-close="handleClose"
      >
        <div>
          <el-form
            ref="formData"
            :model="formData"
            label-position="left"
            class="w100p"
            :rules="rules"
          >
            <el-form-item label="主体名称 :" prop="organizationName" class="w50p">
              <el-input v-model="formData.organizationName" clearable />
            </el-form-item>
            <el-form-item label="负责人 :" prop="contact" class="w50p">
              <el-input v-model="formData.contact" clearable />
            </el-form-item>
            <el-form-item label="地址 :" prop="plantAddress" class="w50p">
              <el-input v-model="formData.plantAddress" clearable />
            </el-form-item>
            <el-form-item label="主体资质 :" class="w100p">
              <el-upload
                action="#"
                :auto-upload="false"
                accept="image/*"
                style="display: inline-block;"
                multiple
                list-type="picture-card"
                :file-list="fileList"
                :on-change="fileChange"
                :on-remove="fileRemove"
                :on-exceed="fileExceede"
                :limit="8"
                :on-preview="handlePictureCardPreview"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save('formData')">{{ titleText }}</el-button>
        </span>
      </el-dialog>
      <!-- 通用图片弹出框 -->
      <el-dialog title="主体荣誉资质" :visible.sync="dialogzizhFormVisible">
        <!-- 检测报告 -->
        <!-- <div class="base-zh-title">主体荣誉资质</div> -->
        <div class="quality">
          <el-button
            class="prev"
            type="text"
            @click="prev()"
          ><i class="el-icon-arrow-left"></i></el-button>
          <el-carousel
            ref="ficialfix"
            :loop="true"
            arrow="never"
            :interval="4000"
            type="card"
            :autoplay="true"
            height="65vh"
          >
            <el-carousel-item
              v-for="(item, index) in fileList"
              :key="index"
            >
              <img :src="item.url" class="zhimgl" />
            </el-carousel-item>
          </el-carousel>
          <el-button
            class="next"
            type="text"
            @click="next()"
          ><i class="el-icon-arrow-right"></i></el-button>
        </div>
      <!-- </div> -->
      </el-dialog>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </template>

    <template v-slot:table-box>
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="92%"
        @row-click="handleEdit"
        @row-dblclick="handledbEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column
          prop="organizationName"
          label="主体名称"
          min-width="180"
        />
        <el-table-column prop="contact" label="负责人" min-width="100" />
        <el-table-column prop="plantAddress" label="种养地址" min-width="100" />
        <el-table-column label="资质图片">
          <template v-if="scope.row.artificialOrganizationNo" slot-scope="scope">
            <el-button
              type="warning"
              plain
              @click.stop="artificialImgList(scope.row.artificialOrganizationNo, 'dialog')"
            >查看</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template v-if="scope.row.traceSource" slot-scope="scope">
            <el-button
              type="danger"
              plain
              @click="delcode(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <Pagination
        :page-size="pagmes.pageSize"
        :current-page="pagmes.currentPage"
        :total-size="pagmes.totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
  </baseMainSlot>
</template>
<script>
import baseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import Pagination from "@/components/Pagination";
import ActionBar from "@/components/ActionBar";
import selectbutton from "@/components/selectbutton/index.vue";
import SearchBox from "@/components/SearchBox";
import { mymixin } from "@/utils/mixin";
import subjectApi from "@/api/basic-info-manage/subject-information-management.js";
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'subjectInformationManagement',
  components: {
    baseMainSlot,
    Pagination,
    // uploadimage,
    selectbutton,
    SearchBox,
    // EleUploadImage,
    ActionBar
  },
  mixins: [mymixin],
  data() {
    return {
      loading: false,
      // 输入框是否可修改true为可修改
      canInput: false,
      // 添加删除修改状态---主要通过此状态来判断调用方法
      nowChanceStau: "",
      // 操作按钮的逻辑及展示数据
      addActive: true,
      delActive: false,
      saveActive: false,
      cancelActive: false,
      editActive: false,
      dialogFormVisible: false,
      tableData: [],
      image: null,
      batchList: [],
      buttonselectlist: [],
      topitemtypeid: 0,
      dialogzizhFormVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      nowimageurl: "",
      pagmes: {
        pageSize: 10,
        currentPage: 1,
        totalSize: 0
      },
      GroupHeight: "100px",
      checkboxName: "展开",
      artificialOrganizationNoList: [],
      // 搜索条件
      organizationName: "",
      fileList: [],
      artiImgList: [],
      contact: '',
      plantAddress: '',
      rules: {
        organizationName: [
          { required: true, message: "请输入主体名称", trigger: "blur" }
        ],
        contact: [
          { required: true, message: "请输入种养地址", trigger: "blur" }
        ],
        plantAddress: [
          { required: true, message: "请输入负责人", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    // this.getbatchselect();
  },
  mounted() {},
  methods: {
    // 按钮当前选择index
    nowselectbuttonindex(i) {
      this.topitemtypeid = i;
      this.getTableDataList();
    },
    //   获取表格信息
    getTableDataList() {
      let params = {
        page: this.pagmes.currentPage,
        size: this.pagmes.pageSize,
        entity: {
          organizationName: this.organizationName || undefined,
          deleteFlag: false,
          contact: this.contact || undefined,
          plantAddress: this.plantAddress || undefined,
          organizationNo: sessionStorage.organizationNo
        }
      };
      if (this.topitemtypeid === 0) {
        subjectApi.artificialPageList(params).then(res => {
          this.tableData = res.data.content;
          this.pagmes.totalSize = res.data.totalElements;
          this.addblankmet();
          this.resetActionBar()
        });
      } else {
        this.tableData = [];
        this.addblankmet();
        this.pagmes.totalSize = 0;
      }
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pagmes.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.pagmes.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit(row) {
      // console.log(row);
      // TODO 点击行元素后 edit
      this.formData = { ...row };
      this.addHide = true;
      this.addActive = true;
      this.editActive = true;
      this.saveActive = false;
      this.canInput = false;
      if (row.status === false) {
        this.editActive = false;
      }
    },
    // 添加
    add() {
      this.canInput = true;
      this.nowChanceStau = 'add'
      this.formData = {}
      this.image = "";
      this.fileList = []
      this.InImgUrl = ''
      this.titleText = "添加"
      this.addActive = false;
      this.delActive = false;
      this.saveActive = true;
      this.cancelActive = true;
      this.editActive = false;
      this.dialogFormVisible = true;
    },
    // 修改
    edit() {
      this.nowChanceStau = 'edit'
      this.artificialImgList(this.formData.artificialOrganizationNo, '')
      this.basicUrl = this.reseUrl;
      this.titleText = "修改"
      this.dialogFormVisible = true;
      this.canInput = true;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = true;
      this.cancelActive = true;
      this.editActive = false
    },
    handledbEdit(row) {
      if (row.artificialOrganizationNoList) {
        this.purchaseVisible = true;
      }
    },
    handleSelectionChange(list) {
      this.artificialOrganizationNoList = [];
      this.artificialOrganizationNoList = list.map(
        item => item.artificialOrganizationNo
      );
      if (this.artificialOrganizationNoList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 删除
    delmessage() {
      subjectApi
        .artificialDelList({
          artificialOrganizationNoList: this.artificialOrganizationNoList
        })
        .then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.getTableDataList();
            // this.resetActionBar();
          } else {
            this.$message.warning(res.msg || "删除失败");
          }
        });
    },
    // 填充表格空白行
    addblankmet() {
      let havline = this.tableData.length % this.pagmes.pageSize;
      if (this.tableData.length < this.pagmes.pageSize) {
        if (havline < this.pagmes.pageSize) {
          const remain = this.pagmes.pageSize - havline;
          for (var i = 0; i < remain; i++) {
            this.tableData.push({ index: i + this.tableData.length - 1 });
          }
        }
      }
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            subjectApi.artificialEdit(this.formData).then(res => {
              if (res.code === 1) {
                // this.$message.success(res.msg || "修改成功！");
                // this.fileList.forEach()
                this.$refs[formData].resetFields();
                this.submitUploadEdit(this.formData.artificialOrganizationNo)
                // this.getTableDataList();
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.msg || "修改失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            subjectApi.artificialAdd(this.formData).then(res => {
              if (res.code === 1) {
                // this.$message.success("新增成功！");
                // this.$refs[formData].resetFields();
                this.submitUpload(res.data.artificialOrganizationNo)
                // this.getTableDataList();
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.msg || "新增失败！");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 获取图片
    artificialImgList(e, edg) {
      this.loading = true
      subjectApi.artificialPictureQuery(e).then(res => {
        let data = res.data
        data.forEach(item => {
          if (item.picture) {
            this.$set(item, 'url', 'data:image/png;base64,' + item.picture)
          }
        })
        this.fileList = data
        this.loading = false
      });
      if (edg === 'dialog') {
        this.dialogzizhFormVisible = true
      }
    },
    prev() {
      this.$refs.ficialfix.prev();
    },
    next() {
      this.$refs.ficialfix.next();
    },
    // 检测文件变动获取文件
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 检测文件 删除
    fileRemove(file, fileList) {
      this.fileList = fileList;
    },
    fileExceede(file, fileList) {
      this.$message.warning('图片最多不能大于8张')
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 手动上传图片
    submitUpload(e) {
      let formData = new FormData(); //  将文件封装进FormData
      this.fileList.forEach((file, index) => {
        if (file.size !== undefined) {
          formData.append("multipartFile", file.raw);
        } else {
          var bytes = window.atob(file.url.split(',')[1]);
          var array = [];
          for (var i = 0; i < bytes.length; i++) {
            array.push(bytes.charCodeAt(i));
          }
          var blob = new Blob([new Uint8Array(array)], { type: file.type });
          formData.append('multipartFile', blob, file.pictureName);
        }
      });
      formData.append("artificialOrganizationNo", e);
      // return
      subjectApi.artificialPictureList(formData).then(res => {
        if (res.code === 1) {
          this.getTableDataList();
          this.$message.success("新增成功！");
        }
      });
    },
    // 手动上传图片
    submitUploadEdit(e) {
      let formData = new FormData(); //  将文件封装进FormData
      this.fileList.forEach((file, index) => {
        if (file.size !== undefined) {
          formData.append("multipartFile", file.raw);
        } else {
          var bytes = window.atob(file.url.split(',')[1]);
          var array = [];
          for (var i = 0; i < bytes.length; i++) {
            array.push(bytes.charCodeAt(i));
          }
          var blob = new Blob([new Uint8Array(array)], { type: file.type });
          formData.append('multipartFile', blob, file.pictureName);
        }
      });
      formData.append("artificialOrganizationNo", e);
      subjectApi.artificialPictureListEdit(formData).then(res => {
        if (res.code === 1) {
          this.getTableDataList();
          this.$message.success("修改成功！");
        }
      });
    },
    // 点击展开
    checkboxHeight() {
      let GroupHeight = this.$refs.checkboxGroup.clientHeight;
      if (GroupHeight <= 120) {
        this.GroupHeight = "400px";
        this.checkboxName = "展开";
      } else {
        this.GroupHeight = "120px";
        this.checkboxName = "收起";
      }
    },
    handleClose(done) {
      this.resetActionBar();
      done();
      // this.$confirm("确认关闭？")
      //   .then(_ => {
      //   })
      //   .catch(_ => {});
    },
    // 初始化操作栏状态
    resetActionBar() {
      this.nowChanceStau = "";
      this.formData = {};
      this.fileList = [];
      this.pictureId = "";
      this.InImgUrl = "";
      this.canInput = false;
      this.dialogFormVisible = false;
      this.addActive = true;
      this.delActive = false;
      this.saveActive = false;
      this.cancelActive = false;
      this.editActive = false;
      this.AgriculturalData = [];
      this.FarmingData = [];
      this.productPicture = "";
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  color: #000 !important;
}
::v-deep .el-form-item__content {
  .el-input__inner {
    color: #000 !important;
  }
}
::v-deep .el-form-item.is-error {
  .el-form-item__content {
    border: .8px solid rgba(255, 0, 0, 0.667);
  }
}
::v-deep.el-form-item--medium .el-form-item__content {
  display: flex;
}
::v-deep.el-select {
  width: 100%;
}
// .codeview {
//   ::v-deep.el-dialog {
//     height: 350px;
//   }
// }
::v-deep .el-dialog__footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.zh-topview {
  width: 100%;
  height: 45px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  ::v-deep.el-select {
    width: 200px !important;
  }
  .topview-pici {
    margin-left: 10px;
    // background-color: aqua;
    line-height: 30px;
    display: flex;
    .topview-pici-title {
      min-width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: end;
      padding-right: 10px;
    }
    .el-select {
      width: 300px !important;
    }
  }
}
// 头部添加
.action-bar {
  width: 100%;
  height: 50px;
  background-color: #00485a;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-bottom: 10px;
  .btn-list {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .btn-item {
      margin-right: 15px;
    }
  }
}
::v-deep .el-dialog__wrapper {
  .el-dialog {
    width: 64% !important;
    .el-dialog__body {
      height:74vh ;
      .el-form {
        .checkbox {
          // background: #00000000;
          display: block;
          .el-form-item__content {
            width: 95%;
            margin-left: 5%;
            position: relative;
            .checkboxck {
              position: absolute;
              top: 20px;
              left: 22px;
              // .el-button {
              // }
              .el-button--medium {
                padding: 0;
              }
            }
            .el-checkbox__input.is-indeterminate {
              .el-checkbox__inner {
                background-color: rgba(0, 110, 145, 1);
                border-color: rgba(0, 110, 145, 1);
              }
              .el-checkbox__label {
                color: rgba(0, 110, 145, 1);
              }
            }
            .el-checkbox.is-checked {
              .el-checkbox__inner {
                background-color: rgba(0, 110, 145, 1);
                border-color: rgba(0, 110, 145, 1);
              }
              .el-checkbox__label {
                color: rgba(0, 110, 145, 1);
              }
            }
            .checkbox-group {
              padding-left: 66px;
              min-height: 120px;
              overflow-y: auto;
              .el-checkbox {
                padding: 2px 10px;
                border: 1px solid rgba(220, 223, 230, 1);
                border-radius: 5px;
                margin-bottom: 10px;
              }
              .el-checkbox.is-checked {
                border: 1px solid rgba(0, 110, 145, 1);
                .el-checkbox__label {
                  color: rgba(0, 110, 145, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}
// 溯源码
.codeview {
  ::v-deep .el-dialog {
    width: 25% !important;
  }
}
::v-deep .el-upload--picture-card {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #6ecae3;
}
::v-deep .el-upload-list__item-thumbnail {
      width: 100%;
      height: auto;
  }
::v-deep .el-upload--picture-card {
  position: relative;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  font-size: 34px;
  color: #6ecae3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-dialog__body {
  text-align: center;
}
.el-upload__tip {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
  position: absolute;
  width: 150px;
}
.quality {
  width: 100%;
  height: 100%;
  padding: 10px auto;
  display: flex;
  justify-content: center;
  .el-carousel {
    width: 100%;
    height: 100%;
    .el-carousel__item--card {
      overflow-y: auto;
      display: flex;
      align-items: center;
    }
    .zhimgl {
      // margin-top: 10%;
      width: 100%;
      transform: scale(0.8);
      height: auto;
    }
    ::v-deep .el-carousel__mask {
      background-color: #00000000;
    }
  }
}
.zh-lable {
  width: 80px;
  white-space: nowrap;
  font-size: 16px;
}
.next {
  i {
    font-size: 100px;
    color: #bcbcbc;
  }
}
.prev {
  i {
    font-size: 100px;
    color: #bcbcbc;
  }
}
</style>
